<script >
  //选项式api
  //   将内容划分若干个选项! 每个内部独立存在 data -> 数据  || methods -> 方法
  //   优点: 更加清晰明了 数据不用响应式处理   缺点:  数据不用响应式处理默认都是响应式  选项之间无法直接引用
  export default {
    data() {
        return {
          count: 0 , //默认就是响应式,
          name :"网站名"
        };
    },
    methods: {
        increase() {
            //this -> vue的对象 . count
          this.count++;
        },
        decrease() {
          this.count--;
        }
    }
}

</script>

<template>
  <div>
    <button @click="decrease()">-</button> {{ count }} <button @click="increase()">+</button>
  </div>
</template>

<style scoped>

</style>